// 引入必要的依赖
import { useNavigate } from "react-router-dom";
import classNames from "classnames";
import './index.css'


export default function Index() {
	// 使用 useNavigate hook
	const navigate = useNavigate();

	return (
		<div
			className={classNames(
				"fullScreen",
				"columnContainer",
				"jcCenter",
				"aiCenter"
			)}
		>
			<div style={{ marginBottom: "12px" }}>
				<button onClick={() => navigate("/basics")}>基础</button>
			</div>
			<div style={{ marginBottom: "12px" }}>
				<button onClick={() => navigate("/calender")}>简单日历</button>
			</div>
			<div style={{ marginBottom: "12px" }}>
				<button onClick={() => navigate("/calender-pro")}>
					复杂日历
				</button>
			</div>
			<div style={{ marginBottom: "12px" }}>
				<button onClick={() => navigate("/toast")}>Toast</button>
			</div>
			<div style={{ marginBottom: "12px" }}>
				<button onClick={() => navigate("/online-piano")}>
					在线钢琴
				</button>
			</div>
			<div style={{ marginBottom: "12px" }}>
				<button onClick={() => navigate("/icon")}>Icon</button>
			</div>
            <div style={{ marginBottom: "12px" }}>
				<button onClick={() => navigate("/keep-alive")}>Keep Alive</button>
			</div>
            <div style={{ marginBottom: "12px" }}>
				<button onClick={() => navigate("/dnd")}>拖拽练习</button>
			</div>
            <div style={{ marginBottom: "12px" }}>
				<button onClick={() => navigate("/play-ground")}>play-ground</button>
			</div>
            <div style={{ marginBottom: "12px" }}>
				<button onClick={() => navigate("/lowcode-editor")}>低代码平台</button>
			</div>
		</div>
	);
}
